// table
.el-table th,
.el-table td {
  padding: 4px !important;
  font-size: $font-size-sm !important;
}
.el-table::before {
  height: 0 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--playlist-hover-bgcolor) !important;
}
// 空数据
.el-table__empty-block {
  background: var(--body-bgcolor);
  color: var(--font-color);
}
.el-table__header-wrapper th {
  color: var(--font-color);
}
.el-table {
  background-color: var(--body-bgcolor) !important;
}

// 表格单元格的通用样式
@mixin el-td-style($color) {
  td,
  th,
  tr {
    background-color: $color !important;
    transition: background-color 0s !important;
    border-bottom: none !important;

    .cell {
      white-space: nowrap !important;
    }
  }
}
.el-table,
.el-table {
  @include el-td-style(var(--body-bgcolor));

  tr.el-table__row--striped {
    @include el-td-style(var(--stripe-bg));
  }
}
// 允许外部在某个类下面覆写table样式
@mixin el-table-theme($color, $stripe-color: var(--stripe-bg)) {
  ::v-deep .el-table {
    @include el-td-style($color);

    tr.el-table__row--striped {
      @include el-td-style(#{$stripe-color});
    }
  }
}
// carosel
.el-carousel--horizontal {
  overflow: hidden;
}

// popover
@each $direction in 'bottom' 'top' 'left' 'right' {
  .el-popper[x-placement^='#{$direction}'] .popper__arrow,
  .el-popper[x-placement^='#{$direction}'] .popper__arrow::after {
    border-#{$direction}-color: var(--prompt-bg-color) !important;
  }
}
.el-popover {
  background: var(--prompt-bg-color) !important;
  border: none !important;
  text-align: left;
  @include box-shadow;
}

// input
$input-height: 24px;
@mixin el-input-style($color, $bg-color, $placeholder-color) {
  .el-input__inner {
    height: $input-height !important;
    line-height: $input-height !important;
    background: #{$bg-color} !important;
    border: none !important;
    color: #{$color} !important;

    &:hover {
      border: none !important;
    }
  }
  .el-input__prefix {
    i {
      line-height: $input-height + 1px !important;
      color: #{$color} !important;
      transition: none !important;
    }
  }

  input::-webkit-input-placeholder {
    color: #{$placeholder-color} !important;
  }
}

// 外部覆写input-theme样式
@mixin el-input-theme($color, $bg-color, $placeholder-color: $color) {
  ::v-deep .el-input {
    @include el-input-style($color, $bg-color, $placeholder-color);
  }
}

.el-input {
  @include el-input-style(
    var(--input-color),
    var(--input-bgcolor),
    var(--font-color-grey-shallow)
  );
}

// pagination
.el-pagination,
.el-pagination button,
.el-pager li {
  background: inherit !important;
  color: var(--font-color) !important;

  .active {
    color: $theme-color !important;
  }
}

// dialog
.el-dialog {
  background: var(--modal-bg-color) !important;
  @include box-shadow;

  .el-dialog__body {
    color: var(--font-color) !important;
  }

  // 右上角图标
  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: $theme-color;
  }
}

// button
.el-button--primary {
  background: $theme-color !important;
  border-color: $theme-color !important;
}

// loading
.el-loading-spinner {
  circle {
    stroke: $theme-color !important;
  }
  .el-loading-text {
    color: $theme-color !important;
  }
  .el-icon-loading {
    color: $theme-color !important;
  }
}
